<template>
    <div class="management_container">
        <Tree
                style="overflow: hidden"
                :data="treeSource"
                :render="renderContent"
                class="demo-tree-render"
                empty-text="暂无项目"
                @on-select-change="selectTreeItem"
        ></Tree>
        <div class="management_container-tag">
            目录
        </div>
    </div>

</template>
<script>
  import {mapState} from 'vuex';

  export default {
    data() {
      return {}
    },
    methods: {
      selectTreeItem(treeArr) {
        this.$store.commit('selectTreeContent', treeArr[0].uuid)
      },
      renderContent(h, {root, node, data}) {
        return h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('Icon', {
              props: {
                type: 'ios-paper-outline'
              },
              style: {
                marginRight: '8px'
              }
            }),
            h('span', data.title)
          ]),
          h('span', {
            style: {
              display: 'inline-block',
              float: 'right',
              marginRight: '32px'
            }
          })
        ]);
      }
    },
    computed: {
      ...mapState([
        'treeSource'
      ])
    }
  }
</script>

<style scoped lang="scss">
    .management_container {
        padding-top: 10px;
        width: 100%;
        height: 100%;
        position: relative;

        .management_container-tag {
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            padding: 2px;
            justify-content: flex-start;
            align-items: center;
            -webkit-box-shadow: inset 0 1px 0 0 #fff;
            -moz-box-shadow: inset 0 1px 0 0 #fff;
            box-shadow: inset 0 1px 0 0 #fff;
            background-color: #f5f5f5;
            background-image: linear-gradient(to bottom, #f5f5f5, #eee);
            border: 1px solid #aaaaaa;
        }
    }

    .demo-tree-render .ivu-tree-title {
        width: 100%;
    }

</style>
